---
title: Styling
---

The default look and feel of inputs is Bootstrap-esque and intended to
be a neutral starting point for customization. React widgets's theme is written in Sass.
Be sure to configure which ever bundler your using to handle `.scss` files. Be sure
to install `sass` not `node-sass`, the latter does not support
the necessary Sass features RW depends on.

## Customize

Styles can be fully customized through Sass's module
configuration syntax: https://sass-lang.com/documentation/at-rules/use#configuration

```scss title="my-theme.scss"
@use "react-widgets/styles.scss" with (
  $input-height: 2.5em,
  // Most component variables are forwarded with a namespace
  $list-selected-bg: #49c6de,
);
```

## A la carte component builds

You may not need every input RW offers. To keep your bundles small, you can configure
exactly which components you want to include styles for with the `$components` variable.

```scss
@use "react-widgets/styles.scss" with (
  $components: (
    'Listbox',
    'DropdownList',
    'Combobox',
    'Multiselect',
    // 'DatePicker',
    // 'Calendar',
    // 'TimeInput',
    'NumberPicker'
  )
);
```

Components that depend on each other will automatically be enabled if required. E.g.
`Calendar` is required to use `DatePicker`, so is enabled automatically when you
include `DatePicker`.

## Font and Input sizes

Component sizing is done via `em` units, and the base font-size is `1em`
enabling components to scale with the surrounding
font-size. If you want to use a fixed size adjust the `font-size` variable.
Using the default values, inputs were designed with a 16px font size in mind, but you
can also tweak the input height for different root font sizes.

```scss title="Sass Configuration"
@use "react-widgets/scss/react-widgets" with (
  $widget-font-size: 16px,
  $input-height: 2.5em
);
```
